<template>
    <div class="nav">
        <ul style="cursor: pointer">

            <!--            利用vue路由进行单击切换
                             遍历数组进行页面渲染-->
            <router-link tag="li" v-for="(item,index) in list" :to=item.path @click.native="tabs(index)" :key="index">
                <nav ><img :src="item.pic"  alt=""></nav>
                <p>{{item.name}}</p></router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        data() {
            return {
                list: [{
                    pic:require("../assets/images/资料.png"),
                    path: "/information",
                    name: "资料管理"
                }, {
                    pic:require("../assets/images/分组 copy.png"),
                    path: "/product",
                    name: "产品管理"
                }, {
                    pic:require("../assets/images/Group 88 Copy.png"),
                    path: "/gallery",
                    name: "图册管理"
                }, {
                    pic:require("../assets/images/数据.png"),
                    path: "/datum",
                    name: "数据展示"
                },]
            };
        },
        methods: {
            tabs(index) {
                // 每次单击先让所有的标签同色
                let list = document.getElementsByTagName("li")
                for (let i = 0; i < list.length; i++) {
                    list[i].style.backgroundColor = "#FFFFFF"
                    list[i].style.border = "none"
                }
                list[index].style.backgroundColor = "#E6F7FF"
                list[index].style.borderRight = "2px solid #1890FF"
                this.$store.commit("changeShow", true)
                let obj  = {
                    "fileType":'',
                    "name":"",
                    "startTime":"",
                    "endTime":""
                }
                this.$store.commit("changeObj",obj)
                this.$store.commit("changePageNum",1)
            }
        },
        components: {}
    }
</script>

<style lang="less" scoped>
    .nav {
        width: 256px;
        height: 812px;

        ul {
            width: 100%;
            margin-top: 9px;
            list-style: none;

            padding: 0;

            li {
                width: 100%;
                height: 40px;
                line-height: 40px;
                margin-top: 14px;
                text-align: left;
                padding: 0;

                nav {
                    width: 16px;
                    height: 16px;
                    margin-left: 25px;
                    margin-top: 12px;
                    float: left;
                    img{
                        margin-top: -27px;
                        height: 16px;
                        width: 16px;
                    }

                    /*background-color: #001529*/
                }

                p {
                    width: 56px;
                    height: 40px;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #1890FF;
                    line-height: 22px;
                    padding: 9px 0;
                    margin-left: 50px;
                }
            }

            li:nth-child(1) {
                background-color: #E6F7FF;
                border-right: 2px solid #1890FF;
                box-sizing: border-box;
            }
        }
    }


</style>
